<template>
  <div>
    <div class="bg-wt">
      <div class="title flex flex-a-c" v-loading="loading">
        今日实时数据
        <div class="ttime">更新时间：{{ todayChangeDate }}</div>
      </div>
      <div class="flex text-c mainTs">
        <div v-for="(item, index) in tabList" :key="index">
          <p class="name">{{ item.name }}</p>
          <p>
            <span class="num">{{ todayDataObj[item.key] || 0 }}</span
            ><span class="unit">{{ item.unit }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="bg-wt">
      <div class="title flex flex-a-c" v-loading="loading">
        平台运营概况
        <div class="ttime">更新时间：{{ todayChangeDate }}</div>
      </div>
      <div class="flex text-c mainTs">
        <div v-for="(item, index) in operatorTabList" :key="index">
          <p class="name">{{ item.name }}</p>
          <p>
            <span class="num">{{ operatorDataObj[item.key] || 0 }}</span
            ><span class="unit">{{ item.unit }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="flex">
      <div
        class="bg-wt"
        style="margin-right: 5px; flex: 1"
        v-loading="loading1"
      >
        <div class="title flex flex-a-c">
          礼包今日数据
          <div class="ttime">更新时间：{{ todayChangeDate }}</div>
        </div>
        <div class="flex text-c mainTs flex-wp">
          <div
            v-for="(item, index) in todayTableList"
            :key="index"
            style="width: 33.33%; flex: auto"
            :style="{
              opcaity: item.hide ? 1 : 0
            }"
          >
            <p class="name">{{ item.name }}</p>
            <p>
              <span class="num">{{ packageDataObj[item.key] || 0 }}</span
              ><span class="unit">{{ item.unit }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="bg-wt" style="margin-right: 5px; flex: 1" v-loading="loading">
        <div class="title flex flex-a-c">
          商品今日数据
          <div class="ttime">更新时间：{{ todayChangeDate }}</div>
        </div>
        <div class="flex text-c mainTs flex-wp">
          <div
            v-for="(item, index) in todayProductList"
            :key="index"
            style="width: 33.33%; flex: auto"
          >
            <p class="name">{{ item.name }}</p>
            <p>
              <span class="num">{{ productDataObj[item.key] || 0 }}</span
              ><span class="unit">{{ item.unit }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-wt" v-loading="loading2">
      <div class="title flex flex-a-c flex-jc-sb">
        <div class="flex">
          礼包销售趋势图
          <div class="ttime">更新时间：{{ todayChangeDate }}</div>
        </div>
        <el-radio-group v-model="days" size="mini" @change="getGiftbagTrend()">
          <el-radio-button :label="7">7天</el-radio-button>
          <el-radio-button :label="30">30天</el-radio-button>
        </el-radio-group>
      </div>
      <v-chart :options="barOption" style="width: 100%; height: 450px" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        {
          name: '订单总数',
          key: 'orderNumber',
          unit: '单'
        },
        {
          name: '交易总金额',
          key: 'orderAmount',
          unit: '元'
        },
        {
          name: '注册用户数',
          key: 'userCount',
          unit: '人'
        },
        {
          name: '今日权重池',
          key: 'stockCount',
          unit: '个'
        },
        {
          name: '今日收益池',
          key: 'incomeCount',
          unit: '元'
        }
      ],
      operatorTabList: [
        {
          name: '订单总数',
          key: 'allOrderNumber',
          unit: '单'
        },
        {
          name: '交易总金额',
          key: 'allOrderAmount',
          unit: '元'
        },
        {
          name: '注册用户总数',
          key: 'allUserCount',
          unit: '人'
        },
        {
          name: '入驻商户数量',
          key: 'businessCount',
          unit: '个'
        },
        {
          name: '共享红利池',
          key: 'pubShare',
          unit: '元'
        }
      ],
      todayTableList: [
        {
          name: '成交订单数',
          key: 'orderNum',
          unit: '单'
        },
        {
          name: '交易金额',
          key: 'totlePrice',
          unit: '元'
        },
        {
          name: '待支付',
          key: 'waitNum',
          unit: '单'
        },
        {
          name: '待收货',
          key: 'waitReceiveNum',
          unit: '单'
        },
        {
          name: '已完成',
          key: 'finishNum',
          unit: '单'
        },
        {
          name: '退款/售后',
          key: 'returnNum',
          unit: '单',
          hide: true
        }
      ],
      todayProductList: [
        {
          name: '成交订单数',
          key: 'productOrderNumber',
          unit: '单'
        },
        {
          name: '交易金额',
          key: 'productOrderAmount',
          unit: '元'
        },
        {
          name: '待支付',
          key: 'waitOrderAmount',
          unit: '元'
        },
        {
          name: '待收货',
          key: 'waitOrderNumber',
          unit: '单'
        },
        {
          name: '已完成',
          key: 'finishOrderNumber',
          unit: '单'
        },
        {
          name: '退款/售后',
          key: 'qiutOrderNumber',
          unit: '单'
        }
      ],
      todayDataObj: {}, //今日实时
      operatorDataObj: {}, //平台运营
      productDataObj: {},
      todayChangeDate: '',
      days: 7,
      barOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: true,
          top: '15',
          data: ['招财对象大礼包', '平安扣大礼包', '吉祥如意玉如意大礼包']
        },
        grid: {
          left: '60',
          top: '60',
          right: '60',
          bottom: '30'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: []
          }
        ],
        barGap: 0,
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      },
      packageDataObj: {}, //礼包今日
      loading: true,
      loading1: true,
      loading2: false
    };
  },
  beforeMount() {
    this.getPackageStatistics();
    this.getAllStatistics();
    this.getGiftbagTrend();
  },
  methods: {
    getPackageStatistics() {
      this.todayChangeDate = new Date().Format('YYYY-MM-DD hh:mm:ss');
      this.$ajax
        .getData('manage_giftbag/getGiftStatistics', {})
        .then((data) => {
          this.packageDataObj = data.resData;
          this.loading1 = false;
        })
        .catch((error) => {
          this.loading1 = false;
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    },
    getAllStatistics() {
      this.$ajax
        .getData('admin_statics/getAllStatistics', {})
        .then((data) => {
          this.loading = false;
          this.todayDataObj = data.resData.todayStatistics;
          this.operatorDataObj = data.resData.jsonOperator;
          this.productDataObj = data.resData.jsonProduct;
        })
        .catch((error) => {
          this.loading = false;
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    },
    getGiftbagTrend() {
      this.loading2 = true;
      this.$ajax
        .getData('admin_statics/getGiftbagTrend', { days: this.days })
        .then((data) => {
          let dateList = [];
          let oneGiftbagNumList = [];
          let twoGiftbagNumList = [];
          let threeGiftbagNumList = [];
          for (let item of data.resData) {
            dateList.push(item.dateTime);
            oneGiftbagNumList.push(item.oneGiftbagNum);
            twoGiftbagNumList.push(item.twoGiftbagNum);
            threeGiftbagNumList.push(item.threeGiftbagNum);
          }
          this.barOption.xAxis[0].data = dateList;
          this.barOption.series = [
            {
              name: '招财对象大礼包',
              type: 'bar',
              data: oneGiftbagNumList
            },
            {
              name: '平安扣大礼包',
              type: 'bar',
              data: twoGiftbagNumList
            },
            {
              name: '吉祥如意玉如意大礼包',
              type: 'bar',
              data: threeGiftbagNumList
            }
          ];
          this.loading2 = false;
        })
        .catch((error) => {
          this.loading2 = false;
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.bg-wt {
  margin-bottom: 8px;
}
.title {
  padding: 14px 20px;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
  border-bottom: 1px solid #cccccc;
  .ttime {
    color: #6b6b6b;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 400;
  }
}
.mainTs {
  padding: 15px 0;
  > div {
    flex: 1;
    color: #333333;
    line-height: 2;
    > p {
      padding: 0 5px;
    }
    .name {
      padding-bottom: 0;
      font-size: 18px;
      line-height: 32px;
    }
    .num {
      font-weight: 700;
      font-size: 32px;
      margin-right: 6px;
    }
    .unit {
      font-size: 13px;
      color: #999999;
    }
  }
}
</style>